<template>
  <!-- MembershipEdit 成员编辑 -->
  <PageContainer>
    <view class="container edit-member">
      <Header :title="pageTitle" :is-box-shadow="false" />
      <view style="padding-top: 30rpx; background-color: #fff">
        <BasicsForm @register="formRegister" @submit="onSubmit" />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  MembershipEdit  成员编辑 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { ref, computed } from 'vue';
  import { navigateBack, onLoad } from '@/router';
  import { updateMemberLeadingInfo } from '@/api/mine';
  import type { IMemberItem } from '@/api/mine/types';
  import { Toast } from '@/utils';
  import { MemberRoleEnum } from '@/enums/memberRoleEnum';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { type FormActionType, useForm } from '@/components/Form';
  import { ToastTitleEnum } from '@/enums/publicModuleEnum';

  interface FormData {
    name: string;
    socialPosition: string;
    phone: number;
    isAdmin: boolean;
    avatar: string;
  }

  const [register, { setFieldsValue }] = useForm({
    labelAlign: 'left',
    validateTrigger: 'bind',
    btnGroupOptions: {
      submit: { text: '提交' },
    },
    schemas: [
      {
        field: 'name',
        label: '姓名',
        component: 'Input',
        required: true,
      },
      {
        field: 'socialPosition',
        label: '职务',
        component: 'Input',
        required: true,
      },
      {
        field: 'phone',
        label: '手机号',
        component: 'InputPhone',
        required: true,
      },
      {
        field: 'isAdmin',
        label: '管理员',
        component: 'Switch',
        defaultValue: false,
        // required: true,
      },
      {
        field: 'avatar',
        label: '商务照',
        component: 'UploadImg',
        componentProps: {
          isCrop: true,
          cropOptions: {
            width: 640,
            height: 760,
          },
        },
      },
    ],
  });

  function formRegister(instance: FormActionType) {
    register(instance);
    editData.value && setFieldsValue(editData.value);
  }

  const onSubmit = (e: FormData) => {
    const { name, socialPosition, phone, avatar, isAdmin } = e;
    updateMemberLeadingInfo({
      id: itemId.value,
      name,
      socialPosition,
      phone,
      avatar,
      memberRoleType: isAdmin ? MemberRoleEnum.MANAGER : MemberRoleEnum.MEMBER,
    }).then(() => success());
  };

  const item = ref<IMemberItem>();
  let callback: () => void;

  const pageTitle = computed(() => `${item.value ? '编辑成员' : '添加成员'}`);

  const success = () => {
    const duration = 1500;
    const title = item.value ? ToastTitleEnum.EDITSUCCESS : ToastTitleEnum.ADDSUCCESS;
    Toast({
      title,
      icon: 'success',
      duration,
      mask: true,
      success: () => {
        setTimeout(() => {
          callback?.();
          navigateBack();
        }, duration - 100);
      },
    });
  };

  const editData = ref<FormData>();
  const itemId = ref();
  onLoad<'MembershipEdit'>(async (op) => {
    item.value = op.item;
    if (op.item) {
      const { name, socialPosition, avatar, phone, memberRoleType, id } = op.item;
      itemId.value = id;
      editData.value = {
        name,
        socialPosition,
        avatar,
        phone,
        isAdmin: memberRoleType === MemberRoleEnum.MANAGER,
      };
    }
    callback = op.callback;
  });
</script>

<style lang="scss" scoped>
  .container {
    .upload-tips {
      color: #aaabab;
      font-size: 23rpx;
      text-align: left;
      margin: 20rpx 0;
    }
  }
</style>
